<html><head><title>loaddata-jquery-plugin - new onload handler</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.loaddata.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">


function display(a) {

	$(a.list).each(function(i,e) {
		$.tmpl(a.templates.villain,e).appendTo("#list");
	});

	$("#list").css({ "list-style-type" : a.settings.listtype });

}
</script>
<style>
body, h1 { font-family: Tahoma, Arial, Sans }


</style>


</style>

</head>
<body>

<a href="https://docs.google.com/spreadsheet/pub?key=0AnjSydpjIFuXdFVaWFpEWDhQRVFMUXRaOGZDV0hsaFE&output=html" rel="spreadsheet" id="villains" onload="function(){display(this)}"></a>

<H1>loaddata-jquery-plugin</H1>

<p>This project lives <a href="http://code.google.com/p/loaddata-jquery-plugin/">on Google Code</a>.

<p>Some of the useful Google APIs are well hidden. For instance, you can get a handy list of JSON objects out of a published spreadsheet, it's documented <a href="http://code.google.com/intl/de-DE/apis/gdata/samples/spreadsheet_sample.html">here</a>. </p>

<p>To make this capability useful, I created a jQuery plugin that does just that. All you have to do is:

<ol>
<li>create a Google Spreadsheet, publish it to the web and write down the resulting link</li>
<li>in your HTML include jQuery and the plugin</li>
<li>in your HTML, reference the Google Spreadsheet link obtained in step 1 in a common <tt>&lt;a href="<i>spreadsheet link here</i>" rel="spreadsheet" onload="function(){usedata(this)}"&gt;</tt>
link
<li>define the callback - called "usedata" in the example above - that should be executed when the spreadsheed data has loaded</li>
</ol>

<p>Just look at this page as an example!<p>

<h2>Structure of the returned data</h2>

<p>The returned object has properties named after the worksheets in the spreadsheet. Each of these properties is a list of Javascript objects - one for each row of the worksheet, starting from the second row. The object properties are named according to the column heads in the worksheet. Here's an example:</p>
<div style="float:left; width: 30%; margin-right: 10px">
<h3>worksheet "flowers"</h3>
<table style="font-size:80%">
<tr><th>flower</th><th>color</th></tr>
<tr><td>rose</td><td>white</td></tr>
<tr><td>tulip</td><td>yellow</td></tr>
</table>
</div>
<div style="float:left; width: 30%; margin-right: 10px">
<h3>data object</h3>
<pre>

{ data : { flowers : [ { flower: 'rose',  color: 'white'},
                       { flower: 'tulip', color: 'yellow'} ]
}
</pre>
</div>
<br clear=all>
<p>Google converts column headings (=object properties) and worksheet names to lowercase. The column headings are also stripped of non-alphanumeric characters.</p>

<h2>Special Worksheet Names</h2>

<h3>settings</h3>
The settings worksheet (<a href="https://docs.google.com/spreadsheet/pub?key=0AnjSydpjIFuXdFVaWFpEWDhQRVFMUXRaOGZDV0hsaFE&single=true&gid=2&output=html">Example</a>) shoud have at least one name and one value column. These two are combined to populate an object. The values shout be valid Javascript code - to enter simple strings, use quotes, for example.

<h3>templates</h3>
If the jQuery tmpl plugin (see <a href="https://github.com/jquery/jquery-tmpl">here</a>) is present, the templates worksheet is used as a list of templates to complile (<a href="https://docs.google.com/spreadsheet/pub?key=0AnjSydpjIFuXdFVaWFpEWDhQRVFMUXRaOGZDV0hsaFE&single=true&gid=3&output=html">Example</a>). The template is taken from the column named "template" are compiled with the name "name", so they can be used right away when the sheets are loaded.

<h3>others?</h3>
You can extend the jQuery.loaddata.processors object with a property that references a function. If a worksheet with the name of the property is found, the function is called with one argument, the worksheet structured as detailed above, and expects another object or list in return, which will be stored in place of the old worksheet.

<h2>Working Example</h2>
<p>The list below is automatically filled from the Google Spreadsheet at <a href="https://docs.google.com/spreadsheet/pub?key=0AnjSydpjIFuXdFVaWFpEWDhQRVFMUXRaOGZDV0hsaFE&output=htm"><tt>https://docs.google.com/spreadsheet/pub?key=0AnjSydpjIFuXdFVaWFpEWDhQRVFMUXRaOGZDV0hsaFE&output=html</tt></a>, using the template found in the templates worksheet and a setting found in the settings worksheet.</p>

<ol id="list"></ol>
</body>
</html>
